<script setup >
import {
  Management,
  Promotion,
  User,
  Crop,
  EditPen,
  SwitchButton,
  CaretBottom, Iphone, Postcard
} from '@element-plus/icons-vue'
// import avatar from '@/assets/default.png'
// import {userInfoService} from "@/api/user";
import useUserInfoStore from '@/stores/userInfo'
import {ElMessage, ElMessageBox} from "element-plus";
import {useRouter} from "vue-router";
import {useTokenSotre} from '@/stores/token'
const tokenStore = useTokenSotre()
const userInfoStore = useUserInfoStore()
const router = useRouter()
//条目被点击后
const handleCommand = (command)=>{
  if (command === 'logout'){
    //退出登录
    ElMessageBox.confirm(
        '请问您确定要退出吗',
        '提醒',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
    )
        .then(async () => {
          //清空pinia中存储的token及个人信息
          tokenStore.removeToken()
          userInfoStore.removeInfo()
          //跳转到登录页面
          router.push('/login')
          ElMessage({
            type: 'success',
            message: '退出登录',
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消',
          })
        })
  }else {
    router.push('/layout/'+command)
  }

}
import {useBlackSotre} from '@/stores/black'
import emitter from "@/utils/buts";
import {onMounted} from "vue";
const isDark = useBlackSotre()
const toggleDark = () =>{
  let element = document.getElementById('aside');
  let element2 = document.getElementById('head');
  let element3 = document.getElementById('menu');
  if (isDark.black===false){
    element.style.background = 'linear-gradient(to top, #ace0f9 0%,   #fff1eb 100%)';
    element2.style.background = 'white';
    element3.style.background = '#fff1eb';
  }else {
    element.style.background = 'grey';
    element2.style.background = 'grey';
    element3.style.background = 'grey';
  }
}
emitter.on("login", () => {
  toggleDark()
});
onMounted(()=>{
  if (isDark.black==false){
    let element = document.getElementById('aside');
    let element2 = document.getElementById('head');
    let element3 = document.getElementById('menu');
    element.style.background = 'grey';
    element2.style.background = 'grey';
    element3.style.background = 'grey';
  }
})
</script>

<template>
  <!--  element-plus中的容器-->
  <el-container class="layout-container">
    <!-- 左侧菜单 -->
    <el-aside width="200px" id="aside">
      <!--菜单标签-->
      <el-menu active-text-color="#6991c7" text-color="black"
               router id="menu">
        <el-menu-item index="/layout/order" class="sp">
          <el-icon>
            <Management />
          </el-icon>
          <span >我的订单</span>
        </el-menu-item>
        <el-menu-item index="/layout/cart" class="sp">
          <el-icon>
            <Promotion />
          </el-icon>
          <span >我的购物车</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <!-- 右侧主区域 -->
    <el-container >
      <!-- 头部区域 -->
      <el-header id="head">
        <div>用户：<strong>{{userInfoStore.info.name}}</strong></div>
        <!--       下拉菜单-->
        <el-dropdown placement="bottom-end" @command="handleCommand">
                    <span class="el-dropdown__box">
                        <el-avatar :src='userInfoStore.info.images?userInfoStore.info.images:avatar'/>
                        <el-icon>
                            <CaretBottom />
                        </el-icon>
                    </span>
          <template #dropdown>
            <el-dropdown-menu>
              <!--              command 条目被点击后触发，在事件上可以声明一个参数，接收对应的指令-->
              <el-dropdown-item command="info" :icon="User">更换用户名</el-dropdown-item>
              <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>
              <el-dropdown-item command="rePhoneNumber" :icon="Iphone">更换手机号</el-dropdown-item>
              <el-dropdown-item command="reEmail" :icon="Postcard">更换邮箱</el-dropdown-item>
              <el-dropdown-item command="resetPassword" :icon="EditPen">重置密码</el-dropdown-item>
              <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <!-- 中间区域 -->
      <el-main>
<!--                <div style="width: 1290px; height: 570px;border: 1px solid red;">-->
<!--                  内容展示区-->
<!--                </div>-->
        <router-view></router-view>
      </el-main>
      <!-- 底部区域 -->
      <el-footer>debug ©2024 Created by debug电脑配件零售公司</el-footer>
    </el-container>
  </el-container>
</template>

<style lang="scss" scoped>
.layout-container {
  height: 100vh;
  .el-aside {
    background: linear-gradient(to top, #ace0f9 0%,   #fff1eb 100%);
    .el-menu {
      border-right: none;
      margin-top: 60px;
      background: #fff1eb;
    }
  }
.sp{
  margin-bottom: 10px;
  width: 95%;
  margin-left: 5px;
  border-radius: 10px;
  background: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
}
  .el-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-dropdown__box {
      display: flex;
      align-items: center;

      .el-icon {
        color: #999;
        margin-left: 10px;
      }

      &:active,
      &:focus {
        outline: none;
      }
    }
  }

  .el-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
  }
}
</style>